<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 , maximum-scale = 1.0,
    minimum-scale = 1.0, user-scalable = no">
    <title>华为响应式</title>
    <!-- 引入首页css样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入字体图标css -->
    <link rel="stylesheet" href="font/iconfont.css">
    <!-- 引入媒体查询的css样式 -->
    <link rel="stylesheet" href="css/media.css">
    <!-- 引入swiper的css样式 -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- 引入jq插件 -->
    <script src="js/jquery-min.js"></script>
     <!-- 引入首页的js -->
     <script src="js/index.js"></script>
    <!-- 引入swiper的js -->
    <script src="js/swiper.min.js"></script>
  
</head>
<body>
    <!-- 顶部登录 -->
    <div class="login">
        <ul class="login_content">
            <li><i class="iconfont icon-quanbu"></i>集团网站</li>
            <li><i class="iconfont icon-duoyuyan"></i>选择区域/语言</li>
            <li><i class="iconfont icon-denglu"></i>登录</li>
        </ul>
    </div>
    <!-- 导航模块 -->
    <div class="nav">
        <div class="nav_center">
            <section class="nav_logo">
                <img src="images/huawei_logo.png" alt="">
            </section>
            <section class="nav_nav">
                <section><a href="script:;">个人及家庭产品</a></section>
                <section><a href="script:;">商用产品及方案</a></section>
                <section><a href="script:;">服务支持</a></section>
                <section><a href="script:;">合作伙伴与开发者</a></section>
                <section><a href="script:;">关于华为</a></section>
            </section>
            <section class="nav_shop">
                <section class="shop">
                    <i class="iconfont icon-iconfontgoumaihongbao"></i>
                    在线购买
                </section>
                <section class="seacher"><i class="iconfont icon-sousuo"></i></section>
            </section>
            <!-- 970 显示 搜索 导航 -->
            <section class="section_970"> 
                <i class="iconfont icon-sousuo"></i>
                <i class="iconfont icon-daohang"></i>
            </section>
        </div>
    </div>
    <!-- 显示隐藏模块-->
    <div class="showhide">
        <section>个人及家庭产品 <i class="iconfont icon-cuo"></i></section>
        <section>商用产品及方案 <i class="iconfont icon-cuo"></i></section>
        <section>服务支持 <i class="iconfont icon-cuo"></i></section>
        <section>合作伙伴与开发者 <i class="iconfont icon-cuo"></i></section>
        <section>关于华为 <i class="iconfont icon-cuo"></i></section>
    </div>
    <!-- 970导航 -->
    <div class="xnav">
        <div class="xnav_center">
            <section class="xnav_items"><a href="script:;">个人家庭产品</a></section>
            <section class="xnav_items"><a href="script:;">商用产品及方案</a></section>
            <section class="xnav_items"><a href="script:;">服务支持</a></section>
            <section class="xnav_items"><a href="script:;">合作伙伴与开发者</a></section>
            <section class="xnav_items"><a href="script:;">关于华为</a></section>
            <section class="xnav_items"><a href="script:;">在线购买</a></section>
        </div>
    </div>
<!-- 最大宽度1920 -->
<div class="maxwidth">
        <!-- banner轮播 -->
    <div class="banner">
        <div class="swiper mySwiper my1">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                  <img src="images/banner1.jpg" alt="" class="banner_pc">
                  <img src="images/xbanner1.jpg" alt="" class="banner_x">
              </div>
              <div class="swiper-slide">
                <img src="images/banner2.jpg" alt="" class="banner_pc">
                <img src="images/xbanner2.jpg" alt="" class="banner_x">
            </div>
            <div class="swiper-slide">
                <img src="images/banner3.jpg" alt="" class="banner_pc">
                <img src="images/xbanner3.jpg" alt="" class="banner_x">
            </div>
            </div>
                <div class="swiper-button-next next"></div>
                <div class="swiper-button-prev prev"></div>
                <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- 推荐信息 -->
    <div class="recommend">
        <div class="recommend_center">
            <section class="recommend_tit"><p>推荐信息</p></section>
            <!-- pc端 -->
            <div class="recommend_content">
                <section class="recommend_items">
                    <section class="recommend_img">
                        <a href="script:;"><img src="images/imgs1.jpg" alt="" class="recommend_img1"></a>
                        <img src="images/bg.png" alt="" class="recommend_bg">
                    </section>
                    <section class="recommend_product">
                        <p class="product">产品</p>
                        <p class="phone">HUAWEI Mate 50 Pro</p>
                        <p class="up">领势而上</p>
                        <p class="many">了解更多</p>
                    </section>
                </section>
                <section class="recommend_items">
                    <section class="recommend_img">
                        <a href="script:;"><img src="images/imgs2.jpg" alt="" class="recommend_img1"></a>
                        <img src="images/bg.png" alt="" class="recommend_bg">
                    </section>
                    <section class="recommend_product">
                        <p class="product">产品</p>
                        <p class="phone">HUAWEI Pocket S</p>
                        <p class="up">掌心悦色</p>
                        <p class="many">了解更多</p>
                    </section>
                </section>
                <section class="recommend_items">
                    <section class="recommend_img">
                        <a href="script:;"><img src="images/imgs3.jpg" alt="" class="recommend_img1"></a>
                        <img src="images/bg.png" alt="" class="recommend_bg">
                    </section>
                    <section class="recommend_product">
                        <p class="product">产品</p>
                        <p class="phone">HUAWEI WATCH GT 3 Pro<br>典藏版</p>
                        <p class="up">曜夜鎏金，一见倾心</p>
                        <p class="many">了解更多</p>
                    </section>
                </section>
                <section class="recommend_items">
                    <section class="recommend_img">
                        <a href="script:;"><img src="images/imgs4.jpg" alt="" class="recommend_img1"></a>
                        <img src="images/bg.png" alt="" class="recommend_bg">
                    </section>
                    <section class="recommend_product">
                        <p class="product">产品</p>
                        <p class="phone">HUAWEI MateBook X Pro </p>
                        <p class="up">入目惊鸿</p>
                        <p class="many">了解更多</p>
                    </section>
                </section>
                <section class="recommend_items">
                    <section class="recommend_img">
                        <a href="script:;"><img src="images/imgs5.jpg" alt="" class="recommend_img1"></a>
                        <img src="images/bg.png" alt="" class="recommend_bg">
                    </section>
                    <section class="recommend_product">
                        <p class="product">白皮书</p>
                        <p class="phone">拥抱5.5G时代，迈向智能世界</p>
                        <p class="up">《迈向智能世界》系列白皮书发布</p>
                        <p class="many">了解更多</p>
                    </section>
                </section>
                <section class="recommend_items">
                    <section class="recommend_img">
                        <a href="script:;"><img src="images/imgs6.jpg" alt="" class="recommend_img1"></a>
                        <img src="images/bg.png" alt="" class="recommend_bg">
                    </section>
                    <section class="recommend_product">
                        <p class="product">前沿探索</p>
                        <p class="phone">憧憬6G，共同定义6G</p>
                        <p class="up">《6G无线通信新征程》序言</p>
                        <p class="many">了解更多</p>
                    </section>
                </section>
                <section class="recommend_items">
                    <section class="recommend_img">
                        <a href="script:;"><img src="images/imgs7.jpg" alt="" class="recommend_img1"></a>
                        <img src="images/bg.png" alt="" class="recommend_bg">
                    </section>
                    <section class="recommend_product">
                        <p class="product">业务动态</p>
                        <p class="phone">华为数通跻身 2022 Gartner魔力<br>象限领导者</p>
                        <p class="up">领势而上</p>
                        <p class="many">了解更多</p>
                    </section>
                </section>
            </div>
            <!-- 手机端显示 -->
            <div class="x_recommend">
                <div class="swiper mySwiper my2">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                            <img src="images/ximgs1.jpg" alt="">
                            <img src="images/bg.png" alt="" class="x_bg">
                            <section class="x_recommend_txt">
                                <p class="x_product">产品</p>
                                <p class="phone">HUAWEI Mate 50 Pro</p>
                            </section>
                      </div>
                      <div class="swiper-slide">
                        <img src="images/ximgs2.jpg" alt="">
                        <img src="images/bg.png" alt="" class="x_bg">
                        <section class="x_recommend_txt">
                            <p class="x_product">产品</p>
                            <p class="phone">HUAWEI Pocket S</p>
                        </section>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/ximg3.jpg" alt="">
                        <img src="images/bg.png" alt="" class="x_bg">
                        <section class="x_recommend_txt">
                            <p class="x_product">产品</p>
                            <p class="phone">HUAWEI WATCH GT 3 Pro<br> 典藏版</p>
                        </section>
                    </div>
                    </div>
                        <div class="swiper-button-next next"></div>
                        <div class="swiper-button-prev prev"></div>
                        <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="x_recommend_1">
                <section class="x_recommend_items">
                    <img src="images/ximgs3.jpg" alt="">
                    <p class="xp1">产品</p>
                    <p class="xp2">HUAWEI MateBook X Pro </p>
                </section>
                <section class="x_recommend_items">
                    <img src="images/imgs5.jpg" alt="">
                    <p class="xp1">白皮书</p>
                    <p class="xp2">拥抱5.5G时代，迈向智能世界</p>
                </section>
                <section class="x_recommend_items">
                    <img src="images/imgs6.jpg" alt="">
                    <p class="xp1">前沿探索</p>
                    <p class="xp2">憧憬6G，共同定义6G</p>
                </section>
                <section class="x_recommend_items">
                    <img src="images/imgs7.jpg" alt="">
                    <p class="xp1">业务动态</p>
                    <p class="xp2">华为数通跻身 2022 Gartner魔力象限领导者</p>
                </section>
            </div>
        </div>
    </div>
    <!-- 科技助力自然保护地 -->
    <div class="science">
        <img src="images/envi.jpg" alt="" class="envi_pc">
        <img src="images/xscience.jpg" alt="" class="envi_x" >
    </div>
    <!-- 新闻与活动 -->
    <div class="news">
        <section class="recommend_tit"><p>新闻与活动</p></section>
        <div class="news_center">
            <section class="news_items">
                <section class="news_img"><img src="images/news1.jpg" alt=""></section>
                <section class="news_p">
                    <p class="news_tit">2023世界移动大会（MWC）</p>
                    <p class="news_place">地点：西班牙，巴塞罗那<br>日期：2022年2月27日-3月2日</p>
                    <p class="news_txt">与全球运营商一起深入探讨行业新增长，共同描绘GUIDE商业蓝图，打开智能世界之门。</p>
                </section>
                <span class="news_span">展会活动</span>
            </section>
            <section class="news_items">
                <section class="news_img"><img src="images/news2.jpg" alt=""></section>
                <section class="news_p">
                    <p class="news_tit">操作系统产业峰会2022</p>
                    <p class="news_place">地点：线上直播<br>日期：2022年12月28日-29日</p>
                    <p class="news_txt">聚集全产业链力量，聚焦基础软件核心能力构建，引领基础软件持续创新，加快实现高水平科技自立自强</p>
                </section>
                <span class="news_span">展会活动</span>
            </section>
            <section class="news_items ">
                <span class="news_span">新闻</span>
                <section class="news_news">
                    <p class="news_p1">华为发布FTTR全光小微企业星光B30系列新品<br>
                        <span>2023年01月16日</span>
                    </p>
                    <p class="news_p1">中移联合华为荣获ICT中国创新奖优秀创新应用案例<br>
                        <span>2023年01月13日</span>
                    </p>
                    <p class="news_p1">华为2022年Tech4Good大赛冠军揭晓<br>
                        <span>2023年01月10日</span>
                    </p>
                    <p class="news_p1">华为荣登CDP气候行动“A级榜单”，展现卓越环境领导力<br>
                        <span>2023年01月09日</span>
                    </p>
                    <p class="news_p1">华为发布城域池化波分产品和解决方案，助力运营商全业务发展<br>
                        <span>2023年12月30日</span>
                    </p>
                </section>
            </section>
        </div>
        <div class="new_many">
            <a href="script:;">更多活动</a>
            <a href="script:;">更多新闻</a>
        </div>
    </div>
    <!-- 底部 -->
    <footer>
        <div class="footer_center">
            <section class="footer_index">
                <a href="script:;">首页</a>
                <section class="footer_ipt">
                    <input type="text" placeholder="搜索huawei.com">
                    <i class="iconfont icon-sousuo"></i>
                </section>
            </section>
            <div class="footer_about">
                <ul class="footer_ul">
                    <h3><a href="script:;">关于华为</a></h3>
                    <li class="footer_li"><a href="script:;">公司介绍</a></li>
                    <li class="footer_li"><a href="script:;">可持续发展</a></li>
                    <li class="footer_li"><a href="script:;">信任中心</a></li>
                    <li class="footer_li"><a href="script:;">管理层信息</a></li>
                    <li class="footer_li"><a href="script:;">招贤纳士</a></li>
                    <li class="footer_li"><a href="script:;">供应商</a></li>
                    <li class="footer_li"><a href="script:;">查看更多 ></a></li>
                    <i class="iconfont icon-31xiala"></i>
                </ul>
                <ul class="footer_ul">
                    <h3><a href="script:;">新闻与活动</a></h3>
                    <li class="footer_li"><a href="script:;">新闻</a></li>
                    <li class="footer_li"><a href="script:;">展会活动</a></li>
                    <li class="footer_li"><a href="script:;">多媒体</a></li>
                    <i class="iconfont icon-31xiala"></i>
                </ul>
                <ul class="footer_ul">
                    <h3><a href="script:;">发现华为</a></h3>
                    <li class="footer_li"><a href="script:;">华为技术专栏</a></li>
                    <li class="footer_li"><a href="script:;">智能世界2030报告</a></li>
                    <li class="footer_li"><a href="script:;">迈向智能世界白皮书</a></li>
                    <li class="footer_li"><a href="script:;">出版物</a></li>
                    <i class="iconfont icon-31xiala"></i>
                </ul>
                <ul class="footer_ul">
                    <h3><a href="script:;">我们的产品</a></h3>
                    <li class="footer_li"><a href="script:;">个人及家庭产品</a></li>
                    <li class="footer_li"><a href="script:;">企业业务产品</a></li>
                    <li class="footer_li"><a href="script:;">运营商网络产品</a></li>
                    <li class="footer_li"><a href="script:;">华为云服务</a></li>
                    <i class="iconfont icon-31xiala"></i>
                </ul>
                <ul class="footer_ul">
                    <h3><a href="script:;">技术支持</a></h3>
                    <li class="footer_li"><a href="script:;">消费者技术支持</a></li>
                    <li class="footer_li"><a href="script:;">华为云技术支持</a></li>
                    <li class="footer_li"><a href="script:;">企业技术支持</a></li>
                    <li class="footer_li"><a href="script:;">管理层信息</a></li>
                    <li class="footer_li"><a href="script:;">运营商技术支持</a></li>
                    <li class="footer_li"><a href="script:;">产品安全通告</a></li>
                    <i class="iconfont icon-31xiala"></i>
                </ul>
            </div>
            <div class="footer_shop">
                <section class="f_shop">华为商城</section>
                <section class="f_shop">华为云</section>
                <section class="f_shop">华为智能光伏</section>
                <section class="f_shop">产品定义社区</section>
                <section class="f_shop">华为心声社区</section>
            </div>
        </div>
    </footer>
    <!-- 联系我们 -->
    <div class="call">
        <section class="call_items">
            <ul class="call_ul">
                <li class="call_li">©2023 华为技术有限公司</li>
                <li class="call_li">粤A2-20044005号</li>
                <li class="call_li">粤公网安备44030702002388号</li>
            </ul>
        </section>
        <section class="call_items">
            <ul class="call_ul call_ul_l">
                <li class="call_li">练习我们</li>
                <li class="call_li">法律声明</li>
                <li class="call_li">隐私政策</li>
                <li class="call_li">除名查询</li>
            </ul>
        </section>
    </div>
    <!-- 回到顶部 -->
    <span class="totop">
        <i class="iconfont icon-xiangshang"></i>
    </span>
</div>
</body>
</html>